<template>
	<view>

		<view class="preview-full" v-if="previewVideoSrc!=''">
			<video id="myVideo" show-mute-btn controls :autoplay="true" :src="previewVideoSrc">
				<!--<cover-image class="preview-full-gbbtn" @click="previewVideoClose" src="/static/8CjxSJ.png"></cover-image>-->
			</video>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadingBtn: false,
				previewVideoSrc: '',
				previewVideoInfo: '',
				previewVideovid: '',
				is_contact: 0,
			}
		},
		onLoad(ops) {
			let that = this
			let Data = JSON.parse(decodeURIComponent(ops.data))
			console.log('123', Data)
			that.previewVideoSrc = Data.url
		},
		onReady() {
			let that = this
			that.videoContext = uni.createVideoContext('myVideo'); //创建视频实例指向video
		},
		methods: {
			previewVideoClose() {
				uni.navigateBack()

				this.previewVideovid = ''
				this.previewVideoInfo = ''
				this.previewVideoSrc = ''
			},
			yjzhuanfa() {
				let that = this
				//this.previewVideoInfo = ''
				//this.previewVideoSrc = ''

				//this.videoContext.play();  //播放
				that.videoContext.pause(); //暂停
				//that.videoContext.stop()//停止
			},




		}
	}
</script>

<style lang="scss">
	page {
		background-color: #000000;
	}

	.preview-full {
		padding-top: var(--status-bar-height); //这里是状态栏css变量;
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: 100%;
		height: calc(100vh);
		z-index: 1002;
		background-color: #000000;
	}

	.preview-full video {
		width: 100%;
		height: 88%;
		z-index: 1002;
	}

	.preview-full-close {
		position: fixed;

		/* #ifdef MP-WEIXIN */
		left: 32rpx;
		/* #endif */

		/* #ifdef H5 || APP-PLUS */
		right: 32rpx;
		/* #endif */

		top: 115rpx;
		width: 80rpx;
		height: 80rpx;
		line-height: 60rpx;
		text-align: center;
		z-index: 1003;
		/* 	background-color: #808080; */
		color: #fff;
		font-size: 65rpx;
		font-weight: bold;
	}

	.preview-full-info {
		//position: fixed;
		z-index: 2003;
		color: #fff;
		font-size: 24rpx;
		bottom: 100rpx;
		left: 0;
		padding: 0 20rpx;
		word-break: break-all;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.preview-full-gbbtn {
		position: absolute;
		z-index: 2009;
		color: #fff;
		font-size: 24rpx;
		top: 55rpx;
		border-radius: 200rpx;
		width: 60rpx;
		height: 60rpx;
		right: 22rpx;
	}

	.preview-full-xzbtn {
		position: fixed;
		z-index: 2003;
		color: #fff;
		font-size: 24rpx;
		bottom: 30rpx;
		border-radius: 200rpx;
		background-color: #242424;
		padding: 0 0;
		left: 22rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		/deep/ .u-btn--primary {
			height: 54rpx !important;
			line-height: 54rpx !important;
			border-color: #242424 !important;
			background-color: #242424 !important;
			border-radius: 200rpx !important;
			font-size: 24rpx !important;
		}

		/deep/ .u-btn {
			padding: 0 20rpx !important;
		}

		/deep/ uni-button:after {
			border-radius: 200rpx !important;
		}
	}

	.preview-full-yjzf {
		position: fixed;
		z-index: 2003;
		color: #fff;
		font-size: 24rpx;
		bottom: 30rpx;
		border-radius: 200rpx;
		background-color: #242424;
		padding: 10rpx 20rpx;
		right: 32rpx;
	}
</style>